<template>
  <div>
    <my-breadcrumb :items="['用户管理', '用户注册']"></my-breadcrumb>
    <div class="warp">
      <div class="search">
        <div class="input">
          <input type="text" placeholder="根据昵称检索用户">
        </div>
        <Button type="primary" shape="circle" icon="ios-search"></Button>
      </div>
      <div class="list">
        <ul>
          <li v-for="(item, index) in userList" :key="index" @click="select(index, item.id)" :class="active === index ? 'active' : ''">
            <div class="item">
              <div class="avatar">
                <Avatar :src="item.profilePhotoPath" size="large"></Avatar>
                <div class="icon">
                  <Icon type="male" color="#2d8cf0" size="14" v-if="item.sex === 1"></Icon>
                  <Icon type="female" color="#ed3f14" size="14" v-if="item.sex === 2"></Icon>
                </div>
              </div>
              <div class="list_name">
                <p>{{item.nickname}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="code_card">
        <div class="user" v-if="userSelected.nickname">
          <div class="avatar">
            <Avatar size="large" :src="userSelected.profilePhotoPath" shape="square"></Avatar>
          </div>
          <div class="name">
            <p>
              {{userSelected.nickname}}
              <Icon type="android-person" size="16" :color="userSelected.sex === 1 ? '#2d8cf0' : '#ed3f14'" v-if="userSelected.sex !== 0"></Icon>
            </p>
          </div>
        </div>
        <div class="user" v-else>请选择需要注册的用户</div>
        <div class="code" id="login_code">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
!function(a,b,c){function d(a){var c="default";a.self_redirect===!0?c="true":a.self_redirect===!1&&(c="false");var d=b.createElement("iframe"),e="https://open.weixin.qq.com/connect/qrconnect?appid="+a.appid+"&scope="+a.scope+"&redirect_uri="+a.redirect_uri+"&state="+a.state+"&login_type=jssdk&self_redirect="+c;e+=a.style?"&style="+a.style:"",e+=a.href?"&href="+a.href:"",d.src=e,d.frameBorder="0",d.allowTransparency="true",d.scrolling="no",d.width="300px",d.height="400px";var f=b.getElementById(a.id);f.innerHTML="",f.appendChild(d)}a.WxLogin=d}(window,document);
export default {
  name: 'user-register',
  data () {
    return {
      userList: [],
      userSelected: {},
      active: -1
    }
  },
  methods: {
    select (index, id) {
      this.userSelected = this.userList[index]
      this.active = index
      let formData = new FormData()
      formData.append('userId', id)
      this.$ajax.post('/admin/register/code/param', formData, {header: {'Content-Type': 'multipart/form-data'}})
        .then(res => {
          let obj = new WxLogin({
            self_redirect: false,
            id: "login_code",
            appid: res.data.appId,
            scope: "snsapi_login",
            redirect_uri: res.data.redirectUri,
            state: res.data.state,
            style: "black"
          })
        })
    }
  },
  created () {
    this.$ajax.post('/branch/all/user/list', {pageNum: 1, pageSize: 10}).then(res => {
      if (res.data.success) {
        this.userList = res.data.data.list
      }
    })
  }
}
</script>

<style scoped>
.warp{
  overflow: hidden;
}
  .search{
    width: 260px;
    padding: 10px;
    border: 1px solid #dddee1;
    border-bottom: none;
  }

  .search .input{
    float: left;
    height: 32px;
    width: 194px;
    border: 1px solid #dddee1;
    padding-left: 6px;
    margin-right: 12px;
  }
  .input input{
    border: none;
    outline: none;
    height: 100%;
  }
  .list{
    float: left;
    width: 260px;
    height: 550px;
    margin-right: 24px;
    overflow: auto;
    border: 1px solid #dddee1;
    cursor: pointer;
    position: relative;
  }
  .list li:hover{
    background-color: #e9eaec;
  }
  .list li.active{
    border-left: 2px solid #2d8cf0;
    background-color: #dddee1;
  }
  .item{
    overflow: hidden;
    padding: 10px;
  }
  .item .avatar{
    float: left;
    position: relative;
  }
  .avatar .icon{
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .item .list_name{
    float: left;
    margin-left: 10px;
  }
  .list_name p:nth-child(1){
    font-size: 14px;
  }
  .code_card{
    float: left;
    padding: 12px;
    margin-left: 100px;
    border-radius: 3px;
    border: 1px solid #dddee1;
  }
  .code{
    height: 400px;
    width: 300px;
  }
  .user{
    overflow: hidden;
    margin-bottom: 12px;
  }
  .user .avatar{
    float: left;
  }
  .user .name{
    float: left;
    margin-left: 10px;
  }
</style>
